<template xmlns:el-col="http://www.w3.org/1999/html">
    <div id="dashboard">
        <vHeadSpace />
        <div class="outcontainer">
            <vAsideSpace />
            <div class="content">
                <div><!--v-if="showMain"-->
                    <!--卡片化-->
                    <el-tabs>
                        <el-tab-pane label="服务器监控项">
                            <div>
                                <el-row>
                                    <el-col :span="6"><!--align="center"-->
                                        <label>当前展示的设备为：</label>
                                        <el-select v-model="currentHost" placeholder="选择展示基本信息的设备">
                                            <el-option
                                                    v-for="item in hosts"
                                                    :key="item.hostid"
                                                    :label="item.host"
                                                    :value="item.hostid">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button type="primary" icon="el-icon-search" @click="getBasicItem()">搜索</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                            <!--服务器监控项内部展示数据-->
                            <el-tabs :tab-position="tabPosition" v-model="activeName"><!--style="height: 1000px;"-->
                                <el-row>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple" id="cpu_load">CPU负载率</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple-light" id="cpu_usage">CPU使用率</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple" id="disk_capacity">磁盘容量</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple" id="number_of_processes">进程数量</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple" id="net_collisions">网络冲突数量</div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="showChart grid-content bg-purple" id="interrupts">设备中断数量</div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="showChart grid-content bg-purple" id="traffic_statistics">网络接口流量上传统计</div>
                                    </el-col>
                                </el-row>
                            </el-tabs>
                        </el-tab-pane>


                        <!--SNMP监控-->
                        <el-tab-pane label="SNMP监控项">
                            <div>
                                <el-row class="part_high_space">
                                    <el-col :span="8" offset="2" align="center">
                                        <label>当前展示的设备为：</label>
                                        <el-select v-model="currentSNMPHost" placeholder="选择展示SNMP的设备">
                                            <el-option
                                                    v-for="item in SNMPHosts"
                                                    :key="item.hostid"
                                                    :label="item.host"
                                                    :value="item.hostid">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="8" offset="2" align="center">
                                        <label>当前展示的端口为：</label>
                                        <el-select v-model="currentSNMPPort" placeholder="选择展示SNMP的设备">
                                            <el-option
                                                    v-for="item in ports"
                                                    :key="item.hostid"
                                                    :label="item.name"
                                                    :value="item.applicationid">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button type="primary" icon="el-icon-search" @click="getSNMPItem()">搜索</el-button>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="100">
                                    <el-col style="margin-left: 30px" :span="10" class="font_style line_space" align="center">
                                        主机序列号：{{entitySerialNum}}
                                    </el-col>
                                    <el-col :span="10" class="font_style line_space">主机序MAC地址：{{MAC}}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col style="margin-left: 200px" :span="10" class="font_style line_space">端口状态：{{status}}
                                    </el-col>
                                </el-row>
                                <div style="margin-left: 200px" class="total_line_length">
                                    <el-row align="right" class="total_line_length">
                                        <div class="font_style">CPU温度：</div>
                                        <el-progress v-model="temperature" :color="customColors" :text-inside="true"
                                                     :stroke-width="20" :percentage="temperature" :format="getSNMPInfoFormat"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">CPU负载率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="cpu_load" class="progressLen line_space"></el-progress>
                                        <div class="font_style">内存负载率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="mpu_load" status="success"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口入口错包率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="inbound_packets_with_errors"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口出口错包率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="Outbound_packets_with_errors"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口入口丢包率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="parseFloat(inbound_packets_discarded)"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口出口丢包率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="parseFloat(Outbound_packets_discarded)"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口入口带宽利用率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="parseFloat(Bits_received)" status="exception"
                                                     class="progressLen line_space"></el-progress>
                                        <div class="font_style">端口出口带宽利用率：</div>
                                        <el-progress :color="customColors" :text-inside="true" :stroke-width="20"
                                                     :percentage="parseFloat(Bits_sent)" status="exception"
                                                     class="progressLen line_space"></el-progress>
                                    </el-row>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <vFootSpace />

    </div>

</template>
<script>

import axios from "axios";

export default {
  name: "SNMPMonitoring2",
  data() {
    return {
      activeName2: 'second',
      SNMPHosts: [],//当前在线SNMP设备
      hosts: [],//当前在线主机
      currentHost: '10488', // 当前选择的主机
      currentSNMPHost: '10475',
      currentSNMPPort:'2246',
      ports:"",
      //showMain: true,
      activeName: 'first',
      //tabPosition: 'left',
      temperature: '',
      entitySerialNum:'',
      cpu_load: '',
      mpu_load:'',
      MAC:'',
      inbound_packets_discarded:'',
      inbound_packets_with_errors:'',
      Bits_received:'',
      Outbound_packets_discarded:'',
      Outbound_packets_with_errors:'',
      Bits_sent:'',
      status:'',
      applicationId:'',
      customColors: [
        {color: '#b2f51e', percentage: 20},
        {color: '#dfe61d', percentage: 40},
        {color: '#6ff5c7', percentage: 60},
        {color: '#d33a1a', percentage: 80},
        {color: '#d31823', percentage: 100}
      ]
    }
  },
  mounted() {
    // this.loadAllCPULoadData(); // 绘制CPU负载
    this.getHostList();  //获得在线主机
    this.getBasicItem(); // 页面初始化时绘制图表
    this.getSNMPHostList();
    this.getSNMPItem();
  },
  watch: {},
  methods: {

    getPortsInfo(){
      const _this = this;
      axios({
        method: 'get',
        url: '/Port/get_port_info.action',
        params:{
          hostId: _this.currentSNMPHost,
          applicationid:_this.currentSNMPPort,
        }
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.inbound_packets_discarded = (parseFloat(resultList[1].rate)*100).toFixed(3)
        _this.inbound_packets_with_errors = (parseFloat(resultList[2].rate)*100).toFixed(3)
        _this.Bits_received = (parseFloat(resultList[3].rate)*100).toFixed(3)
        _this.Outbound_packets_discarded = (parseFloat(resultList[4].rate)*100).toFixed(3)
        _this.Outbound_packets_with_errors = ((parseFloat(resultList[5].rate))*100).toFixed(3)
        _this.Bits_sent = (parseFloat(resultList[6].rate)*100).toFixed(3)
        _this.status = resultList[8].status
      }).catch(function (error) {
        console.log(error)
      })
    },

    //获取所有的端口号
    getAllPorts() {
      const _this = this;
      axios({
        method: 'get',
        url: '/Port/get_all_port.action',
        params:{
          hostId: _this.currentSNMPHost,
        }
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.ports = resultList
      }).catch(function (error) {
        console.log(error)
      })
    },
    //温度的显示条  CPU负载的显示条  MPU负载的显示条 主机序列号 主机MAC地址
    getSNMPInfoFormat() {
      const _this = this;
      axios({
        method: 'get',
        url: '/Port/get_snmp_information.action',
        params: {
          hostId: _this.currentSNMPHost, // SNMPHostId
        }
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.temperature = resultList[0].lastvalue;
        _this.entitySerialNum = resultList[1].lastvalue;
        _this.MAC = resultList[2].lastvalue;
        _this.cpu_load = resultList[3].value;
        _this.mpu_load = resultList[4].value;
      }).catch(function (error) {
        console.log(error)
      });
      return _this.temperature === 100 ? 'CPU温度过高'+`${_this.temperature}℃`: `${_this.temperature}℃`;
    },
    //获取在线主机
    getHostList() {
      const _this = this;
      axios({
        method: 'get',
        url: '/demo/get_all_online_host.action'
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.hosts = resultList
      }).catch(function (error) {
        console.log(error)
      })
    },

    //发送数据请求
    getBasicItem() {
      // this.loadAllCPULoadData(); // 绘制CPU负载
      this.drawChart("cpu_load", "Load average (1m avg)", "CPU负载"); // 绘制CPU负载
      this.drawChart("cpu_usage", "CPU utilization", "CPU使用率"); // 绘制CPU使用率
      this.drawChart("disk_capacity", "Free swap space in %", "磁盘容量"); // 绘制磁盘容量
      this.drawChart("traffic_statistics", "Interface eth0: Bits sent", "网络接口流量上传统计"); // 绘制网络接口流量上传统计
      this.drawChart("number_of_processes", "Number of processes", "进程数量"); // 绘制进程数量
      this.drawChart("net_collisions", "net.if.collisions", "网络冲突数"); // 绘制进程数量
      this.drawChart("interrupts", "Interrupts per second", "设备中断数"); // 绘制设备中断数
    },

    getSNMPItem(){
      this.getSNMPInfoFormat(); //得到CPU温度 序列号 MAC地址 CPU负载信息  内存负载
      this.getPortsInfo();
      this.getAllPorts();// 获得主机端口名

    },

    getSNMPHostList() {
      const _this = this;
      axios({
        method: 'get',
        url: '/Port/get_all_SNMP_devices.action'
      }).then(function (response) {
        let resultList = response.data.content.result
        console.log("SNMPResultList:" + resultList[0].hostid)
        _this.SNMPHosts = resultList
      }).catch(function (error) {
        console.log(error)
      })
    },
    /**
     * 封装函数，根据传进来的参数，传值给后台，然后渲染数据绘制表格
     */
    drawChart(chartId, itemName, chartName) {
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: itemName // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(chartId));

        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value;

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

    export default {
        name: "SNMPMonitoring2",
        data() {
            return {
                activeName2: 'second',
                SNMPHosts: [],//当前在线SNMP设备
                hosts: [],//当前在线主机
                currentHost: '10488', // 当前选择的主机
                currentSNMPHost: '10475',
                currentSNMPPort: '2244',
                ports: "",
                //showMain: true,
                activeName: 'first',
                //tabPosition: 'left',
                temperature: 0,
                entitySerialNum: 0,
                cpu_load: 0,
                mpu_load: 0,
                MAC: 0,
                inbound_packets_discarded: 0,
                inbound_packets_with_errors:0,
                Bits_received:0,
                Outbound_packets_discarded: 0,
                Outbound_packets_with_errors: 0,
                Bits_sent: 0,
                status: '',
                applicationId: 0,
                customColors: [
                    {color: '#b2f51e', percentage: 20},
                    {color: '#dfe61d', percentage: 40},
                    {color: '#6ff5c7', percentage: 60},
                    {color: '#d33a1a', percentage: 80},
                    {color: '#d31823', percentage: 100}
                ]
            }
        },
        mounted() {
            // this.loadAllCPULoadData(); // 绘制CPU负载
            this.getHostList();  //获得在线主机
            this.getBasicItem(); // 页面初始化时绘制图表
            this.getSNMPHostList();
            this.getSNMPItem();
        },
        watch: {},
        methods: {

            getPortsInfo() {
                const _this = this;
                axios({
                    method: 'get',
                    url: '/Port/get_port_info.action',
                    params: {
                        hostId: _this.currentSNMPHost,
                        applicationid: _this.currentSNMPPort,
                    }
                }).then(function (response) {
                    let resultList = response.data.content.result

                    _this.inbound_packets_discarded = (parseFloat(resultList[0].rate) * 100).toFixed(3)
                    _this.inbound_packets_with_errors = (parseFloat(resultList[1].rate) * 100).toFixed(3)
                    _this.Bits_received = (parseFloat(resultList[2].rate) * 100).toFixed(3)
                    _this.Outbound_packets_discarded = (parseFloat(resultList[3].rate) * 100).toFixed(3)
                    _this.Outbound_packets_with_errors = (parseFloat(resultList[4].rate) * 100).toFixed(3)
                    _this.Bits_sent = (parseFloat(resultList[5].rate) * 100).toFixed(3)
                    _this.status = resultList[7].status
                    alert(typeof _this.Bits_sent)
                }).catch(function (error) {
                    console.log(error)
                })
            },

            //获取所有的端口号
            getAllPorts() {
                const _this = this;
                axios({
                    method: 'get',
                    url: '/Port/get_all_port.action',
                    params: {
                        hostId: _this.currentSNMPHost,
                    }
                }).then(function (response) {

                    let resultList = response.data.content.result
                    if (resultList.length === 1) {
                        alert(resultList[0].name)
                        //清空原来的数据
                        _this.currentSNMPPort = "";
                    } else {
                        _this.ports = resultList
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            //温度的显示条  CPU负载的显示条  MPU负载的显示条 主机序列号 主机MAC地址
            getSNMPInfoFormat() {
                const _this = this;
                axios({
                    method: 'get',
                    url: '/Port/get_snmp_information.action',
                    params: {
                        hostId: _this.currentSNMPHost, // SNMPHostId
                    }
                }).then(function (response) {
                    let resultList = response.data.content.result
                    _this.temperature = parseInt(resultList[0].lastvalue);
                    _this.entitySerialNum = parseInt(resultList[1].lastvalue);
                    _this.MAC = parseInt(resultList[2].lastvalue);
                    _this.cpu_load = parseInt(resultList[3].value);
                    _this.mpu_load = parseInt(resultList[4].value);
                }).catch(function (error) {
                    console.log(error)
                });
                return _this.temperature === 100 ? 'CPU温度过高' + `${_this.temperature}℃` : `${_this.temperature}℃`;
            },
            //获取在线主机
            getHostList() {
                const _this = this;
                axios({
                    method: 'get',
                    url: '/demo/get_all_online_host.action'
                }).then(function (response) {
                    let resultList = response.data.content.result
                    _this.hosts = resultList
                }).catch(function (error) {
                    console.log(error)
                })
            },

            //发送数据请求
            getBasicItem() {
                // this.loadAllCPULoadData(); // 绘制CPU负载
                this.drawChart("cpu_load", "Load average (1m avg)", "CPU负载"); // 绘制CPU负载
                this.drawChart("cpu_usage", "CPU utilization", "CPU使用率"); // 绘制CPU使用率
                this.drawChart("disk_capacity", "Free swap space in %", "磁盘容量"); // 绘制磁盘容量
                this.drawChart("traffic_statistics", "Interface eth0: Bits sent", "网络接口流量上传统计"); // 绘制网络接口流量上传统计
                this.drawChart("number_of_processes", "Number of processes", "进程数量"); // 绘制进程数量
                this.drawChart("net_collisions", "net.if.collisions", "网络冲突数"); // 绘制进程数量
                this.drawChart("interrupts", "Interrupts per second", "设备中断数"); // 绘制设备中断数

            },

            getSNMPItem() {
                this.getSNMPInfoFormat(); //得到CPU温度 序列号 MAC地址 CPU负载信息  内存负载
                this.getPortsInfo();
                this.getAllPorts();// 获得主机端口名

            },

            getSNMPHostList() {
                const _this = this;
                axios({
                    method: 'get',
                    url: '/Port/get_all_SNMP_devices.action'
                }).then(function (response) {
                    let resultList = response.data.content.result
                    console.log("SNMPResultList:" + resultList[0].hostid)
                    _this.SNMPHosts = resultList
                }).catch(function (error) {
                    console.log(error)
                })
            },
            /**
             * 封装函数，根据传进来的参数，传值给后台，然后渲染数据绘制表格
             */
            drawChart(chartId, itemName, chartName) {
                const _this = this;
                axios({
                    methods: 'get',
                    url: '/basical/agentItem.action',
                    params: {
                        hostId: _this.currentHost, // hostId
                        itemName: itemName // 参数名
                    }
                }).then((res) => {
                    var result = res.data.content.result;

                    // 基于准备好的dom，初始化echarts实例
                    let myChart = this.$echarts.init(document.getElementById(chartId));

                    var cpuLoadData = [];
                    var now = +new Date();
                    var oneDay = 1000;
                    // var oneDay = 24 * 3600 * 1000;
                    var value;

                    for (var i = 0; i < result.length; i++) {
                        now = new Date(+now + oneDay);
                        value = result[i].value;
                        var time = result[i].clock;

                        var tempData = {
                            name: now.toString(),
                            value: [
                                time,
                                Math.round(value)
                            ]
                        };
                        cpuLoadData.push(tempData);
                    }

                    var cpuLoadDataLength = result.length - 1;

                    // 指定图表的配置项和数据
                    let option = {
                        title: {
                            text: chartName
                        },
                        tooltip: {
                            trigger: 'axis',
                            // 规定参数的格式
                            formatter: function (params) {
                                params = params[0];
                                var date = new Date(params.name);
                                return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
                            },
                            axisPointer: {
                                animation: true
                            }
                        },
                        //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
                        toolbox: {
                            show: true,
                            //toolbox的配置项
                            feature: {
                                //辅助线的开关
                                mark: {show: true},
                                //数据视图
                                dataView: {
                                    show: true,
                                    readOnly: false
                                },
                                //动态类型切换
                                magicType: {
                                    show: true,
                                    //line为折线图，bar为柱状图
                                    type: ['line', 'bar']
                                },
                                //配置项还原
                                restore: {show: true},
                                //将图标保存为图片
                                saveAsImage: {show: true}
                            }
                        },
                        xAxis: {
                            type: 'time',
                            splitLine: {
                                show: true
                            },
                            triggerEvent: true
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                            splitLine: {
                                show: true
                            }
                        },
                        series: [{
                            name: '数据记录',
                            type: 'line',
                            showSymbol: true,
                            hoverAnimation: true,
                            data: cpuLoadData
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
                    myChart.clear();
                    myChart.setOption(option, true);
                })
            },
        }
    }
</script>
<style scoped>
    #cpu_load {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #cpu_usage {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #number_of_processes {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #disk_capacity {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #interrupts {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #net_collisions {
        width: 1000px;
        height: 450px;
        float: left;
    }

    #traffic_statistics {
        width: 1000px;
        height: 450px;
        float: left;
    }

    .monitors {
        width: 100%;
        height: 450px;
    }

    .showChart {
        height: 400px;
        margin: 8px;
        background-color: #d3e0f3;
    }

    /*.nowEcharts { width: 100%; height: 300px; margin-bottom: 0.3rem;}*/
    .nowEcharts {
        width: 100%;
        height: 450px;
        margin-bottom: 0.3rem;
    }

    .progressLen {
        width: 50%;
    }

    .part_high_space {
        height: 100px;
    }

    .line_space {
        height: 70px;
    }

    .total_line_length {
        width: 100%;
    }

    .font_style {
        font-size: 28px;
        font-family: 宋体;
        color: #720f06;
        font-weight: bold;
    }

    .meter {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 2em;
        margin-top: .3em;
        color: #ff0000;
        animation: meter 10s linear;
        text-shadow: 0 -1px 0 #333333;
    }
    .content{
        margin-top: 80px;
        width: 100%;
        height: 550px;
        overflow-x:hidden
    }
</style>